<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: 景区承载量
-->
<template>
  <com-box :title="BarState.title">
    <template #titleLeft>
      <div class="header-left header-box">{{ BarState.unit }}</div>
    </template>
    <template #titleRight>
      <div class="header-right header-box">{{ BarState.exeNo }}</div>
    </template>
    <div class="nav" v-if="BarState.title">
      <div class="nav-warn">
        <div class="warn-line"></div>
        <div class="warn-text">70%预警线</div>
      </div>
      <div class="box-bar echart-item">
        <charts :params="BarState.params"></charts>
      </div>
    </div>
  </com-box>
</template>
<script lang="ts" setup>
import comBox from '@/components/comBox/comBox.vue'
import { gradientColor } from '@/charts/utils'
import { defineExpose, reactive, onMounted } from 'vue'
import httpRequest from '@/service'

//折线图
const BarState: any = reactive({
  barWarn: {
    width: 0,
    left: 0
  },
  title: '',
  unit: '',
  exeNo: '',
  isGroup: false,
  params: {
    height: '379px',
    loading: false,
    forceRedraw: true, // 强制重绘
    map: {},
    custom: true, //自定义配置
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      legend: {
        data: [],
        show: true,
        right: 100,
        top: 8,
        itemWidth: 15,
        width: '70%',
        textStyle: {
          color: '#CBD1DA'
        }
      },
      tooltip: {
        trigger: 'axis',
        show: true,
        axisPointer: {
          type: 'shadow'
        },
        backgroundColor: '#1959a7',
        borderColor: '#4beeff',
        borderWidth: 1,
        padding: 12,
        textStyle: {
          color: '#fff',
          fontSize: 14
        },
        formatter: (params: any) => {
          if (params) {
            let percent = ''
            let listTemp = '<li style="line-height:26px;display: block;">'
            for (let item of params) {
              if (item.data.percent) {
                percent = item.data.percent
              }
              let name = item.seriesName,
                value = item.data[`value${item.seriesIndex + 1}`]
              if (item.seriesIndex == 2) {
                name = '占比'
                value = percent
              }
              listTemp += `<span style="display: inline-block;width: 50%;text-align:left;font-size:16px;color:#e8effb;">${name} :</span>
                          <span style="display: inline-block;width: 50%;text-align:right;font-size:16px;font-family: 'AliHYAiHei';color:#00ffea;">${value}</span><br/>`
            }
            listTemp += '</li>'
            return `
                    <div style="width:200px;">
                      <div style="display: flex;justify-content: space-between;">
                        <p style="color: #ffc77a;font-size:22px;line-height:40px;font-family: 'AliHYAiHei'">${params[0].name}</p>
                      </div>
                      <ul>${listTemp}</ul>
                    </div>`
          }
        }
      },
      xAxis: {
        data: [],
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#A7B4C4'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '',
        nameTextStyle: {
          align: 'left',
          color: '#46ede8',
          fontSize: 14,
          fontWeight: 'bold'
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#DCDCDC'
          }
        }
      },
      grid: {
        top: 30,
        bottom: 20,
        // left: '10%',
        right: '2%'
      },
      dataZoom: [
        {
          show: false,
          type: 'slider',
          start: 0,
          end: 100,
          width: '96%',
          left: '3%',
          bottom: 7,
          height: 15,
          borderColor: '#166beb',
          handleStyle: {
            color: '#166beb',
            borderColor: '#166beb',
            borderWidth: 4
          },
          moveHandleSize: 10,
          moveHandleStyle: {
            color: '#166beb'
          },
          textStyle: {
            color: '#00c6ff'
          },
          emphasis: {
            handleStyle: {
              color: '#00c6ff',
              borderColor: '#00c6ff',
              borderWidth: 4
            },
            moveHandleStyle: {
              color: '#00c6ff'
            }
          }
        }
      ],
      series: [
        {
          name: '',
          type: 'bar',
          data: [],
          barGap: '20%',
          label: {
            show: false
          },
          itemStyle: {
            color: gradientColor(['#0b3ee3', '#0aeadd'])
          },
          areaStyle: {
            opacity: 0
          }
        },
        {
          name: '',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'top',
            formatter: function (data: any) {
              return data.data.percent
            },
            textStyle: {
              color: '#D6DCE3',
              fontSize: 15
            }
          },
          itemStyle: {
            color: gradientColor(['#efde1f', '#ea690a'])
          },
          areaStyle: {
            opacity: 0
          }
        },
        {
          data: [],
          type: 'pictorialBar', // 顶部
          symbolPosition: 'end',
          symbolOffset: ['-50%', '100%'],
          symbolSize: ['55%', 3],
          symbol: 'rect',
          color: '#FC5651', // Specify the color using rgb format
          zlevel: 2
        }
      ]
    }
  },
  getData: () => {
    BarState.params.loading = true
    httpRequest
      .get({ url: 'M2P3JqczBar', params: {} })
      .then((res) => {
        if (res.code === 200 && Object.keys(res.map).length > 0) {
          BarState.unit = res.unit ? `单位：${res.unit}` : ''
          BarState.exeNo = res.exeNo ? `期号：${res.exeNo}` : ''
          const mapKey = ['value1', 'value2'] //图例
          const legendData = [res.map[mapKey[0]], res.map[mapKey[1]]] //图例
          const legendColor: any = ['#0D7CFF', '#EBBC1E']
          BarState.params.options.legend.data = legendData.map(
            (item: any, index: number) => ({
              name: item,
              itemStyle: {
                color: legendColor[index]
              }
            })
          )
          const pictorialBarData: any = []
          const xAxisName: any = []
          const series: any = {
            value1: [],
            value2: []
          }
          res.data.forEach((item: any) => {
            xAxisName.push(item.name)
            series.value1.push({ ...item, value: item[mapKey[0]] })
            series.value2.push({ ...item, value: item[mapKey[1]] })
            pictorialBarData.push(Number(item[mapKey[0]]) * 0.7)
          })
          BarState.params.options.xAxis.data = xAxisName
          mapKey.forEach((key: any, index: number) => {
            BarState.params.options.series[index].name = res.map[key]
            BarState.params.options.series[index].data = series[key]
          })
          BarState.params.options.series[0].itemStyle.color = gradientColor([
            '#0b3ee3',
            '#0aeadd'
          ])
          BarState.params.options.series[1].itemStyle.color = gradientColor([
            '#efde1f',
            '#ea690a'
          ])
          BarState.params.options.series[2].data = pictorialBarData
          BarState.title = res.title
        }
        setTimeout(() => {
          BarState.params.loading = false
        })
      })
      .catch(() => {
        console.log('请求失败')
        setTimeout(() => {
          BarState.params.loading = false
        })
      })
  }
})
onMounted(() => {
  BarState.getData()
})

const refreshData = () => {
  BarState.getData()
}
defineExpose({
  refreshData
})
</script>
<style lang="less" scoped>
.nav {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  position: relative;

  .nav-warn {
    position: absolute;
    top: 18px;
    right: 33px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .warn-line {
      height: 1px;
      width: 20px;
      background-color: #a92a26;
      margin-right: 5px;
    }

    .warn-text {
      font-size: 13px;
      color: #cbd1da;
    }
  }

  .echart-item {
    width: 100%;
  }

  .box-bar {
    height: 100%;
    padding: 7px 30px 7px 15px;
  }
}
</style>
